<template>

  <div class="main">
    <div class="head-portrait">
      <img src="../imgs/timo.jpg">
    </div>
    <span class="title">电商ERP</span>
    <div class="items">

      <div class="item">
        <el-button style="width:100%;height:60px" @click="toindex()"> <i class="fa fa-home"></i>首页</el-button>
      </div>
      <div class="item">
        <el-button style="width:100%;height:60px" @click="toSpgl()"><i class="fa fa-paw" aria-hidden="true"></i>商品管理
        </el-button>
      </div>
      <div class="item">
        <el-button style="width:100%;height:60px"><i class="fa fa-paw" aria-hidden="true"></i>订单管理</el-button>
      </div>
      <div class="item">
        <el-button style="width:100%;height:60px"><i class="fa fa-money" aria-hidden="true"></i>财务管理</el-button>
      </div>
      <div class="item">
        <el-button style="width:100%;height:60px"><i class="fa fa-bar-chart" aria-hidden="true"></i>数据分析</el-button>
      </div>
      <div class="item">
        <el-button style="width:100%;height:60px"><i class="fa fa-cog" aria-hidden="true"></i>系统设置</el-button>
      </div>


    </div>

  </div>


</template>

<script>
module.exports = {
  data() {
    return {

    };
  },
  methods: {
    toSpgl() {
      location.href = 'spgl.html'
    },
    toindex() {
      location.href = 'index.html'
    }

  }
};
</script>

<style scoped>
.items .item i {
  font-size: 25px;
  color: black;
  padding: 5px;
}

.main {
  background-color: gray;
  border: 1px solid wheat;
  width: 15%;
  height: 100%;
  position: absolute;
}

.head-portrait {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px auto;
  border-radius: 50%;
}

.head-portrait img {
  position: relative;
  width: 100px;
  height: auto;
  margin: auto;
  border-radius: 50%;

}

.title {
  margin-left: 35%;
}

.items .item {
  padding-top: 10%;
  width: 100%;
  height: 50px;

}

.items .item button {
  color: black;
  /* background-color: gray; */
  border-radius: 10%;
  background-color: gainsboro;
}

</style>